<template>
	<view class="content">
		<view class="wx-login">
			<view class="login-Box">
				<view class="img">
					<image :src="userInfo.avatarUrl" style="width: 100px;height: 100px;"></image>
				</view>
				<!-- 				<view class="subTitle">再就业男团系统</view>
				<view class="subTitle">登录前需要您的授权</view>
				<view class="title" style="margin-top:48rpx">再就业男团系统不会将您的</view> -->
				<view class="" v-if="flag">
					<view class="title">个人信息提供给第三方仅用于该小程序！</view>
					<button class="loginBtn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">微信用户一键登录</button>
				</view>
				<button v-else class="loginBtn" @click="getUserInfo">获取用户信息</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				phone: "",
				flag: false
			}
		},
		onShow() {},
		methods: {
			getPhoneNumber(e) {
				this.$https('/weixin_get_user_phone_number_api', {
					code: e.detail.code
				}).then(res => {
					this.phone = res.phone_info.phoneNumber
					this.wxlogon()
					console.log(res.phone_info, 'res', this.phone)
				}).catch(err => {
					console.log(err)
				})
			},
			wxlogon() {
				uni.showLoading({
					title: '加载中',
				});
				uni.login({
					provider: 'weixin',
					success: (res) => {
						console.log('res-login', res);
						this.$https('/weixin_get_openid_session_key_api', {
							app_id: getApp().globalData.appID,
							app_secret: "dcbd19d1b9f65ca7f72839ca1f727428",
							wx_code: res.code
						}).then(result => {
							let user_id = result.user_message.user_id
							getApp().globalData.userIfon = result.user_message
							// this.userInfo = result.user_message
							if (result.is_register) {
								uni.switchTab({
									url: "/pages/home/index"
								})
							} else {
								this.$https("/user_register_api", {
									openid: result.token_message.openid,
									session_key: result.token_message.session_key,
									user_id: user_id,
									user_name: this.userInfo.nickName,
									avatar: this.userInfo.avatarUrl,
									phone: this.phone,
								}).then(res => {
									getApp().globalData.userIfon = res
									getApp().globalData.userIfon.phone = this.phone
									uni.switchTab({
										url: "/pages/home/index"
									})
									uni.showToast({
										title: "登陆成功",
										icon: "success"
									})
								})
							}
						})
					},
					complete: () => {
						// 隐藏loading
						uni.hideLoading();
					},
				});
			},
			getUserInfo() {
				// 展示加载框
				uni.getUserProfile({
					desc: '登录后可同步数据',
					success: async (res) => {
						this.userInfo = res.userInfo


						this.flag = true
						// 调用 action ，请求登录接口
					},
					fail: () => {
						uni.showToast({
							title: '授权已取消',
							icon: 'error',
							mask: true,
						});
					},
					complete: () => {
						// 隐藏loading
						uni.hideLoading();
					},
				});
			},
		}
	}
</script>

<style lang="less">
	.wx-login {
		display: flex;
		// align-items: center;
		justify-content: center;
		width: 100%;
		box-sizing: border-box;
		height: 100vh;
		/* background-image: url(../../static/img/mescroll/loginBG.png); */
		background-size: 100% 100%;
	}

	.login-Box {
		width: 606rpx;
		margin-top: 112rpx;

		.img {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 110rpx;
		}

		.subTitle {
			font-size: 16px;
			font-weight: 700;
			letter-spacing: 0px;
			line-height: 22px;
			color: rgba(26, 26, 26, 1);
			text-align: center;
		}

		.title {
			font-size: 14px;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 20.27px;
			color: rgba(102, 102, 102, 1);
			text-align: center;
		}

		.loginBtn {
			margin-top: 72rpx;
			border-radius: 328rpx;
			background-color: #166DF1;
			width: 100%;
			height: 88rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 32rpx;
			font-weight: 400;
		}

		.forgetPassword {
			font-size: 12px;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 22px;
			color: rgba(134, 144, 156, 1);
			text-align: center;
			vertical-align: top;
			margin-top: 28px;
		}
	}
</style>